<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Edstudy</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" type="image/x-icon" href="../static/css/img/favicon.png">
    <!-- Place favicon.ico in the root directory -->

    <!-- CSS here -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/odometer.css">
    <link rel="stylesheet" href="css/aos.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="css/js/jquery.magnifier.js"></script>
    <style>
        .breadcrumb-bg{
            padding-top:100px;
            padding-bottom:100px;
        }
    </style>
    <script src="css/js/vendor/jquery-3.5.0.min.js"></script>
</head>
<body>

<!-- preloader  -->

<div id="preloader">
   <div id="ctn-preloader" class="ctn-preloader">
       <div class="animation-preloader">
           <div class="spinner"></div>
         <div class="txt-loading">
                       <span data-text-preloader="E" class="letters-loading">
                           E
                       </span>
               <span data-text-preloader="D" class="letters-loading">
                           D
                       </span>
               <span data-text-preloader="S" class="letters-loading">
                           S
                       </span>
               <span data-text-preloader="T" class="letters-loading">
                           T
                       </span>
               <span data-text-preloader="U" class="letters-loading">
                           U
                       </span>
               <span data-text-preloader="D" class="letters-loading">
                           D
                       </span>
               <span data-text-preloader="Y" class="letters-loading">
                           Y
                       </span>
           </div>
        </div>
        <div class="loader">
            <div class="row">
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- preloader end -->


<!-- Scroll-top -->
<button class="scroll-top scroll-to-target" data-target="html">
    <i class="fas fa-angle-up"></i>
</button>
<!-- Scroll-top-end-->


<!-- header-area -->
<header>
    <div class="header-top-wrap d-none d-md-block">
        <div class="container-fluid container-full">
            <div class="row align-items-center" style=" padding-left: 85px; padding-right: 85px;">
                <div class="col-lg-6 col-md-6">
                    <div class="d-flex align-items-center">
                        <div class="header-top-library">
                            <a href="#">图书馆我们<i class="fas fa-angle-down"></i></a>
                        </div>
                        <div class="header-top-search">
                            <form action="#">
                                <input type="text" placeholder="Search...">
                                <button><i class="fas fa-search"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="header-right-list">
                        <div class="header-top-social" style="height: 20px">
                            <ul>
                                <li>联系我们</li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li>
                                    <a href="#"><i class="fab fa-weibo"></i> </a></li>
                                <li><a href="tencent://message/?uin=1092535160&Menu=yes& Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"><i class="fab fa-qq"></i></a></li>
                                <li id="weixin_hover" ><a href="#"><i class="fab fa-weixin"></i>
                                    <ul>
                                        <img class="qrcode" id="weixin_img"  src="css/img/product/wx_01.png" alt="wx:K15035689083"/>
                                    </ul>
                                </a></li>
                            </ul>
                        </div>
                        <div class="header-user-login">
                            <a href="#"><i class="fas fa-user-circle"></i><span th:text="${session.name}"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input id="userid" type="hidden" th:value="${session.id}"/>

                            <a href="#" th:href="@{/logout}"> <i class="fa fa-sign-out"></i><span>注销</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="sticky-header" class="main-header menu-area transparent-header">
        <div class="container-fluid container-full">
            <div class="row">
                <div class="col-12">
                    <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                    <div class="menu-wrap">
                        <nav class="menu-nav show">
                            <div class="logo">
                                <a href="index.html">
                                    <img src="css/img/logo/logo.png" class="logo-sticky-none" alt="Logo">
                                    <img src="css/img/logo/logo_2.png" class="logo-sticky-block" alt="Logo">
                                </a>
                            </div>
                            <div class="navbar-wrap main-menu d-none d-lg-flex">
                                <ul class="navigation">
                                    <li class="current dropdown"><a href="index">首页</a>
                                        <!--                                                <ul class="submenu">-->
                                        <!--                                                    <li class="active"><a href="index.html">首页一</a></li>-->
                                        <!--                                                    <li><a href="index-2.html">首页二</a></li>-->
                                        <!--                                                </ul>-->
                                    </li>
                                    <li><a href="about-us.html">关于</a></li>
                                    <li><a href="/lb">课程</a>

                                    </li>
                                    <li class="current"><a href="index-2.html">考试</a></li>
                                    <li class="current active"><a href="shop">商城</a></li>
                                    <li class="current dropdown"><a href="blog">公告</a>
                                    <li><a href="contact.html">联系我们</a></li>
                                    <li class="current dropdown"><a href="personal/menuAdmin.html">个人中心</a>
                                        <ul class="submenu">
                                            <li><a href="#">我的积分</a></li>
                                            <li><a href="#">我的信息</a></li>
                                            <li><a href="#">地址管理</a></li>
                                            <li><a href="#">问题反馈</a></li>
                                            <li><a href="#">我的课程</a></li>
                                            <li><a href="#">我的考试</a></li>
                                            <li><a href="#">学习记录</a></li>
                                            <li><a href="#">我的收藏</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="header-action d-none d-md-block">
                                <ul>
                                    <li class="header-shop-cart"><a href="#"><i class="fas fa-shopping-basket"></i><span>0</span></a>
                                        <ul class="minicart">
                                            <li class="d-flex align-items-start">
                                                <div class="cart-img">
                                                    <a href="#">
                                                        <img src="css/img/product/cart_p01.jpg" alt="">
                                                    </a>
                                                </div>
                                                <div class="cart-content">
                                                    <h4>
                                                        <a href="#">Charity Nike Brand Yellow T-Shirt</a>
                                                    </h4>
                                                    <div class="cart-price">
                                                        <span class="new">$229.9</span>
                                                        <span>
                                                                    <del>$229.9</del>
                                                                </span>
                                                    </div>
                                                </div>
                                                <div class="del-icon">
                                                    <a href="#">
                                                        <i class="far fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="d-flex align-items-start">
                                                <div class="cart-img">
                                                    <a href="#">
                                                        <img src="css/img/product/cart_p02.jpg" alt="">
                                                    </a>
                                                </div>
                                                <div class="cart-content">
                                                    <h4>
                                                        <a href="#">BackPack For School Student</a>
                                                    </h4>
                                                    <div class="cart-price">
                                                        <span class="new">$229.9</span>
                                                        <span>
                                                                    <del>$229.9</del>
                                                                </span>
                                                    </div>
                                                </div>
                                                <div class="del-icon">
                                                    <a href="#">
                                                        <i class="far fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="total-price">
                                                    <span class="f-left">Total:</span>
                                                    <span class="f-right">$239.9</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="checkout-link">
                                                    <a href="#">Shopping Cart</a>
                                                    <a class="red-color" href="#">Checkout</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="header-btn"><a href="#" class="btn">立即签到</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <!-- Mobile Menu  -->
                    <div class="mobile-menu">
                        <div class="menu-backdrop"></div>
                        <div class="close-btn"><i class="fas fa-times"></i></div>

                        <nav class="menu-box">
                            <div class="nav-logo"><a href="index.html"><img src="css/img/logo/logo.png" alt="" title=""></a></div>
                            <div class="menu-outer">
                                <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                            </div>
                            <div class="social-links">
                                <ul class="clearfix">
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
                                    <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                    <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                    <li><a href="#"><span class="fab fa-youtube"></span></a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <!-- End Mobile Menu -->
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header-area-end -->

<!-- main-area -->
<main>

    <!-- breadcrumb-area -->
    <section class="breadcrumb-area breadcrumb-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-content text-center">
                        <h2>商品详情</h2>
                        <nav aria-label="breadcrumb">

                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb-area-end -->

    <!-- shop-area -->
    <section class="shop-area pt-120 pb-120" style="padding-top: 80px;">
        <div class="container" style="margin-left: 44px;">
            <div class="row justify-content-center">
                <div class="col-lg-9">






<!--身体-->
                    <div class="content inner">
                        <section class="item-show__div item-show__head clearfix">
                            <div class="pull-left">

                                <div class="item-pic__box" id="magnifier">
                                    <div class="small-box">
                                        <img class="cover" th:src="${product.picturepath}" alt="">
                                        <span class="hover"></span>
                                    </div>


                                </div>
                                <div class="big-box"><img th:src="${product.picturepath}" alt=""></div>
                            </div>

                            <div class="item-info__box" style="margin-right: 60px;">
                                <div class="item-title">
                                    <div class="name ep2" th:text="'【'+${product.getCommodityname()}+'】'"
                                         style="color: #666;font: 700 23px Arial,'microsoft yahei'"></div>

                                    <div class="name ep2" th:text="${product.getDescribe()}"
                                         style="font-family: arial,'microsoft yahei';
                                         color: #e3393c;font-size: 12px;line-height: 20px;
                                         padding-left: 15px;
                                         margin-top: 10px;"></div>
                                </div>

                                <div class="item-key">
                                    <div class="item-sku">
                                        <dl class="item-prop clearfix">
                                            <dt class="item-metatit">积分：</dt>
                                            <dd><ul data-property="积分" class="clearfix">
                                                <li><span href="javascript:;"   th:data-value="${product.getIntegral()}"  >
                                                    <span th:text="€+'&nbsp;'+${product.getIntegral()}" style="color: red"></span>
                                                    <input type="hidden" id="jifen" th:value="${product.getIntegral()}"/>
                                                    <input type="hidden" id="proid" th:value="${product.getId()}"/>
                                                </span></li>
                                            </ul></dd>
                                        </dl>
                                        <dl class="item-prop clearfix">
                                            <dt class="item-metatit">库存：</dt>
                                            <dd><ul data-property="库存" class="clearfix">
                                                <li><span th:data-value="${product.getStock()}" >
                                                    <span th:text="${product.getStock()}" id="Stock"> </span>
                                                     <input type="hidden" id="kucun" th:value="${product.getStock()}"/>
                                                </span></li>

                                            </ul></dd>
                                        </dl>
                                    </div>
                                    <div class="item-amount clearfix bgf5">
                                        <div class="item-metatit">数量：</div>
                                        <div class="amount-box">
                                            <div class="amount-widget">
                                                <input class="amount-input" value="1" maxlength="8" title="请输入购买量" type="text">
                                                <div class="amount-btn">
                                                    <a class="amount-but add"></a>
                                                    <a class="amount-but sub"></a>
                                                </div>
                                            </div>
                                            <div class="item-stock"> </div>
                                            <script  type="text/javascript">



                                          /*      $(".sub").click(function () {
                                                    var buy= $(".amount-input").val();
                                                    buy=buy-1;
                                                });*/
                                                $(function () {




                                                    $('.amount-input').onlyReg({reg: /[^0-9]/g});
                                                    var stock = $('#Stock').text();
                                                    var buy= $(".amount-input").val();
                                                    $('.amount-widget').on('click','.amount-but',function() {
                                                        var num = parseInt($('.amount-input').val());
                                                        if (!num) num = 0;
                                                        if ($(this).hasClass('add')) {

                                                            if (num > stock - 1){
                                                                return DJMask.open({
                                                                    width:"300px",
                                                                    height:"100px",
                                                                    content:"您输入的数量超过库存上限"
                                                                });
                                                            }
                                                            $('.amount-input').val(num + 1);
                                                        } else if ($(this).hasClass('sub')) {
                                                            if (num == 1){
                                                                return DJMask.open({
                                                                    width:"300px",
                                                                    height:"100px",
                                                                    content:"您输入的数量有误"
                                                                });
                                                            }
                                                            $('.amount-input').val(num - 1);
                                                        }
                                                    });
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <div class="item-action clearfix bgf5">
                                        <!--<a href="javascript:;" rel="nofollow" data-addfastbuy="true" title="点击此按钮，到下一步确认购买信息。" role="button" class="item-action__buy">立即兑换</a>
                                        --><input type="button" name="test_jiaojuan" value="立即兑换"
                                               class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"></font>

                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>



                    </div>







                </div>

            </div>
        </div>
    </section>
    <!-- shop-area-end -->
</main>
<!-- main-area-end -->


<!-- footer-area -->
<footer>
    <div class="footer-top black-bg pt-95 pb-45">
        <div class="container-fluid container-full">
            <div class="row justify-content-between">
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>关于我们</h5>
                        </div>
                        <div class="fw-text">
                            <p>Arwhal pop intellientsia pinterest微剂量代字云面包gochujang。</p>
                            <div class="footer-contact-list mt-20">
                                <ul>
                                    <li>732/21 King Street，金斯敦英国 </li>
                                    <li>1-577-245-658742</li>
                                    <li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5aaa3a3aca6a085a0bda4a8b5a9a0eba6aaa8">电子邮件保护</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>快速链接</h5>
                        </div>
                        <div class="fw-links">
                            <ul>
                                <li><a href="#">家</a></li>
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">作品集</a></li>
                                <li><a href="#">博客</a></li>
                                <li><a href="#">联系我们</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>热门课程</h5>
                        </div>
                        <div class="footer-courses">
                            <ul>
                                <li>
                                    <div class="f-courses-thumb">
                                        <a href="#"><img src="css/img/courses/f_courses_thumb01.jpg" alt=""></a>
                                    </div>
                                    <div class="f-courses-content">
                                        <h5><a href="#">Access 2016基本培训培训示例</a></h5>
                                        <span>托诺·普约（Tonoy Pueyo）</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="f-courses-thumb">
                                        <a href="#"><img src="css/img/courses/f_courses_thumb02.jpg" alt=""></a>
                                    </div>
                                    <div class="f-courses-content">
                                        <h5><a href="#">Python编程基础培训示例</a></h5>
                                        <span>马克·维恩斯</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="footer-widget mb-50">
                        <div class="fw-title mb-25">
                            <h5>Twitter的饲料</h5>
                        </div>
                        <div class="fw-tweet-post">
                            <ul>
                                <li>
                                    <i class="fab fa-twitter"></i>
                                    <div class="fw-tweet-post-content">
                                        <p>这里谈到的 <a href="#">https://t.ew/ARkjsdsd</a>
                                            该恒星#theme是任何类型的发</p>
                                        <span>3个月前</span>
                                    </div>
                                </li>
                                <li>
                                    <i class="fab fa-twitter"></i>
                                    <div class="fw-tweet-post-content">
                                        <p>这里谈到的<a href="#">https://t.ew/ARkjsdsd</a>
                                            这个恒星#theme是为任何现代类型制作的……<a
                                                    href="#">https://t.ew/ARkjsdsd</a></p>
                                        <span>3个月前</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright-area">
        <div class="container-fluid container-full">
            <div class="row">
                <div class="col-md-6">
                    <div class="copyright-text">
                        <p>版权所有©2020.公司名称保留所有权利。</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="payment-method-img text-center text-md-right">
                        <img src="css/img/images/payment_method_img.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer-area-end -->

<!--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span>提示</span>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>-->
            </div>
            <div class="modal-body">确认要兑换吗？</div>
            <div class="modal-footer" id="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="guanbi">取消</button>
                <button type="button" class="btn btn-primary" id="btn-primary">确定</button>
                <!-- <button type="button" class="btn btn-primary" id="cha" style="display: none">查看答案</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



<!-- JS here -->

<script src="css/js/popper.min.js"></script>
<script src="css/js/bootstrap.min.js"></script>
<script src="css/js/isotope.pkgd.min.js"></script>
<script src="css/js/imagesloaded.pkgd.min.js"></script>
<script src="css/js/jquery.magnific-popup.min.js"></script>
<script src="css/js/owl.carousel.min.js"></script>
<script src="css/js/jquery.odometer.min.js"></script>
<script src="css/js/jquery-ui.min.js"></script>
<script src="css/js/jquery.appear.js"></script>
<script src="css/js/slick.min.js"></script>
<script src="css/js/ajax-form.js"></script>
<script src="css/js/wow.min.js"></script>
<script src="css/js/aos.js"></script>
<script src="css/js/plugins.js"></script>
<script src="css/js/main.js"></script>



<script src="css/js/bootstrap.min.js" charset="UTF-8"></script>
<script src="css/js/swiper.min.js" charset="UTF-8"></script>
<script src="css/js/global.js" charset="UTF-8"></script>
<script src="css/js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<script src="css/js/jquery.magnifier.js"></script>
<script >
    /*点击确认兑换，判断积分是否足够，兑换成功扣除积分*/
    $("#btn-primary").click(function () {
        $('#myModal').modal('hide');
        var id=$('#userid').val();//获取用户id
        var jifen=$('#jifen').val();//获取商品所需积分
         var kucun=$('#kucun').val();//获取库存
        var shu=$('.amount-input').val();//获取数量
        var proid=$('#proid').val();//获取商品id
        var updkucun=kucun-shu;

        $.ajax({
            "url":"/jifen",
            "data":"userid="+id+"&jifen="+jifen+"&kucun="+updkucun+"&proid="+proid,
            "dataType":"text",
            "success":function(result){
                if(result>0){
                    setTimeout("location.reload()",2200);
                    return DJMask.open({
                        width:"300px",
                        height:"100px",
                        content:"兑换成功"
                    });



                }else {
                    return DJMask.open({
                        width:"300px",
                        height:"100px",
                        content:"积分不足"
                    });
                }
            }
        });



    })


    $(function(){
        $('#magnifier').magnifier();
    });

</script>


</body>
</html>
